import React, { useCallback, useEffect, useState } from 'react'
import { List } from 'antd';
import http from '../../api/http';
import { useNavigate } from 'react-router-dom';
import { Image } from 'antd';
// import { Divider, Skeleton } from 'antd';
// import InfiniteScroll from 'react-infinite-scroll-component';

function Index() {
  const navigate = useNavigate()
  // 获取列表文章
  const [list, setList] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  // const [loading, setLoading] = useState(false);

  // 异步获取列表
  const fetchList = async () => {
    const params: {
      page: number,
      pageSize: number
    } = {
      page,
      pageSize
    }
    const res = await http.get('/article/list', {
      params
    })
    // console.log(res, '文章列表');
    const { count, rows } = res.data;
    setList(rows);
    setTotal(count);
  }
  useEffect(() => {
    fetchList()
  }, [page, pageSize])
  // // 分页
  const change = (page: number, pageSize: number) => {
    setPage(page);
    setPageSize(pageSize)
  }
  // const loadMoreData = useCallback((page: number, pageSize: number) => {
  //   if (!loading && list.length < total) {
  //     setPage(page + 1);
  //     setPageSize(pageSize)
  //   }
  // }, [page,pageSize,total,list.length])

  // 去详情-评论
  const handleToDetail = (id) =>{
    navigate(`/detail/${id}`)
  }

  return (
    <div>
      <List
            dataSource={list}
            pagination={{
              total: total,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total) => `共有 ${total} 条`,
              onChange: change
            }}
            renderItem={(item) => (
              <List.Item>
                <div style={{ display: "flex", justifyContent: 'space-between', alignItems: "center" }}>
                  <div style={{ width: '1200px' }}>
                    <h3 onClick={()=>handleToDetail(item.id)} className='
                    font-bold
                    text-2xl
                    '>{item.title}</h3>
                    <p>id: {item.id}</p>
                    <p>内容:{item.content}</p>
                    <p>
                      <span style={{ marginRight: '20px' }}>创建时间:{item.createdAt}</span>
                      <span style={{ marginRight: '20px' }}>修改时间:{item.updatedAt}</span>
                      <span>浏览量:{item.viewCount}</span>
                    </p>
                  </div>
                  <Image
                    width={80}
                    src='https://tse3-mm.cn.bing.net/th/id/OIP-C.K9a7Jx7UjV6R3H-CtWKXVQAAAA?w=173&h=203&c=7&r=0&o=5&dpr=1.1&pid=1.7'
                  />
                </div>
              </List.Item>
            )}
          />

      {/* <div
        id="scrollableDiv"
        style={{
          height: 400,
          overflow: 'auto',
          padding: '0 16px',
          border: '1px solid rgba(140, 140, 140, 0.35)',
        }}
      >
        <InfiniteScroll
          dataLength={list.length}
          next={loadMoreData}
          hasMore={list.length < 50}
          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
          endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
          scrollableTarget="scrollableDiv"
        >

        </InfiniteScroll>
      </div> */}
    </div>
  )
}

export default Index
